<template>
    <div style="height: 100%" class="workspace">
        <el-container ref="listWarp" style="height: 100%">
            <div class="left">
                <div class="title">
                    <div class="area"><span class="line"></span> 巡检区域</div>
                </div>
                <div class="statusList">
                    <el-tree
                        :data="treeData"
                        :props="defaultProps"
                        node-key="id"
                        @node-click="handleNodeClick"
                        :default-expanded-keys="defaultExpandedKeys"
                        :current-node-key="currentNodekey"
                        ref="tree"
                        highlight-current
                    ></el-tree>
                </div>
            </div>
            <el-container
                style="height: 100%; background: #fff; flex: 1"
                class="right"
                v-loading="loading"
            >
                <el-header style="height: auto; padding: 20px 20px 0 20px">
                    <div class="title" style="border: none; padding: 0">
                        <div class="area"><span class="line"></span>{{ areaName }}</div>
                    </div>
                </el-header>
                <el-main style="height: 100%">
                    <div class="content" style="height: calc(100% - 40px)">
                        <div class="aproveBox">
                            <div>审批人</div>
                            <div class="users">
                                <draggable
                                    v-model="approveList"
                                    group="people"
                                    class="user"
                                    @end="end"
                                >
                                    <div
                                        v-for="(item, index) in approveList"
                                        :key="item.id"
                                        class="user-item"
                                    >
                                        {{ item.userName }}
                                        <svg-icon
                                            icon-class="close"
                                            style="font-size: 13px; margin-right: 3px"
                                            @click="del(item, '1')"
                                        />
                                    </div>
                                </draggable>
                                <div class="addArea" @click="addUser('1')">
                                    <span style="margin-right: 5px">+</span>添加
                                </div>
                            </div>
                            <div class="desc">请拖动人员进行审批排序</div>
                        </div>
                        <div class="aproveBox">
                            <div>抄送人</div>
                            <div class="users">
                                <div class="user">
                                    <div
                                        v-for="(item, index) in pushList"
                                        :key="item.id"
                                        class="user-item"
                                    >
                                        {{ item.userName }}
                                        <svg-icon
                                            icon-class="close"
                                            style="font-size: 13px; margin-right: 3px"
                                            @click="del(item, '2')"
                                        />
                                    </div>
                                </div>
                                <div class="addArea" @click="addUser('2')">
                                    <span style="margin-right: 5px">+</span>添加
                                </div>
                            </div>
                        </div>
                    </div>
                </el-main>
            </el-container>
        </el-container>

        <!-- 新增用户 -->
        <el-dialog
            :visible.sync="dialogFormVisibleUser"
            :close-on-click-modal="false"
            @close="evtDialogClose"
            lock-scroll
            title="添加"
            width="550px"
        >
            <div v-loading="addLoading">
                <div class="win-warp" style="height: 300px">
                    <el-input
                        v-model="username"
                        placeholder="请输入名称查找"
                        size="small"
                        style="margin-bottom: 10px"
                        @change="getUserList"
                    ></el-input>
                    <el-table
                        :data="userList"
                        height="250px"
                        style="width: 100%"
                        border
                        tooltip-effect="light"
                        highlight-current-row
                        ref="userTable"
                        @selection-change="userSelectionChange"
                    >
                        <el-table-column type="selection" width="55"> </el-table-column>
                        <el-table-column type="index" width="50" label="序号"></el-table-column
                        ><el-table-column prop="name" label="姓名"></el-table-column
                        ><el-table-column prop="account" label="账号"></el-table-column
                    ></el-table>
                </div>
                <div class="dialog-footer">
                    <el-button @click="dialogFormVisibleUser = false" size="small">取 消</el-button>
                    <el-button
                        @click="addUserConfirm()"
                        type="primary"
                        size="small"
                        style="background: #00b38b; border: none"
                        >确定</el-button
                    >
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { equipmentApi } from '@/api/patrol/equipment'
import { areaApi } from '@/api/patrol/area'
import { approveApi } from '@/api/patrol/approve'

import draggable from 'vuedraggable'
export default {
    components: {
        draggable,
    },
    data() {
        return {
            defaultProps: {
                children: 'children',
                label: 'name',
            },
            approveList: [], // 审批人
            pushList: [], // 抄送人
            statusCurrent: '1',
            tableData: [],
            defaultExpandedKeys: [], // 默认展开
            codeList: [],
            currentNodekey: '', // 默认选中,
            statusList: [
                { value: '1', label: '待我审批的', icon: 'dwsp' },
                { value: '2', label: '我已审批', icon: 'wysp' },
                { value: '3', label: '抄送给我的', icon: 'csgwd' },
            ],
            dialogFormVisibleUser: false,
            loading: false,
            addLoading: false,
            username: '',
            userList: [],
            userSelection: [],
            treeData: [],
            searchObj: {},
            type: '1',
            areaName: '',
        }
    },
    methods: {
        evtDialogClose() {
            this.$refs.userTable.clearSelection()
            this.username = ''
            this.userSelection = []
        },
        handleNodeClick(data) {
            // if (data.type === "2") {
            this.currentNodekey = data.id
            this.searchObj.regionId = data.id
            this.areaName = data.name
            this.getBatchUsersList()
            // } else {
            //   this.$message.warning("请点击二级区域进行筛选");
            // }
        },
        // 选中用户
        userSelectionChange(val) {
            this.userSelection = val
        },
        addUser(type) {
            this.dialogFormVisibleUser = true
            this.type = type
            this.getUserList()
        },
        // 删除
        del(item, type) {
            this.$confirm('确定要删除当前数据吗？', '删除', {
                distinguishCancelAndClose: true,
                confirmButtonText: '删除',
                cancelButtonText: '放弃删除',
            })
                .then(() => {
                    approveApi.Del(this.searchObj.regionId, item.userId, type).then((res) => {
                        if ((res.status = 'success')) {
                            this.getBatchUsersList()
                            this.$message.success('删除成功')
                        }
                    })
                })
                .catch(() => {})
        },
        addUserConfirm() {
            if (this.userSelection.length === 0) {
                this.$message.error('请选择用户')
                return false
            }

            let list = []
            this.userSelection.forEach((item) => {
                list.push({
                    regionId: this.searchObj.regionId,
                    type: this.type,
                    userId: item.id,
                    userName: item.name,
                })
            })
            this.addLoading = true
            approveApi
                .batchSaveRegionUser(JSON.stringify(list), '0')
                .then((e) => {
                    this.dialogFormVisibleUser = false
                    this.$message.success('添加成功')
                    this.addLoading = false
                    this.getBatchUsersList()
                })
                .catch(() => {
                    this.dialogFormVisibleUser = false
                    this.addLoading = false
                })
        },
        // 拖动结束
        end() {
            this.loading = true
            approveApi
                .batchSaveRegionUser(JSON.stringify(this.approveList), '1')
                .then((e) => {
                    this.getBatchUsersList()
                    this.$message.success('排序成功')
                    this.loading = false
                })
                .catch(() => {
                    this.dialogFormVisibleUser = false
                    this.loading = false
                })
        },

        // 获取用户
        getUserList() {
            this.addLoading = true
            let search = [
                {
                    andOr: 'and',
                    searchField: 'schoolcode',
                    operator: '=',
                    searchValue: this.$itsoftUI.config.schoolCode,
                },
                {
                    andOr: 'and',
                    searchField: 'systemcode',
                    operator: '=',
                    searchValue: 'newRepair',
                },
            ]
            if (this.username) {
                search.push({
                    andOr: 'and',
                    searchField: 'name',
                    operator: 'like',
                    searchValue: this.username,
                })
            }
            areaApi.userList(JSON.stringify(search)).then((res) => {
                let users = this.type === '1' ? this.approveList : this.pushList
                let list = res.data.filter((item) => !users.some((ele) => ele.userId === item.id))
                this.userList = list
                this.addLoading = false
            })
        },
        // 组装条件
        setSearchData() {
            this.search = []
            for (const key in this.searchObj) {
                const item = this.searchObj[key]
                if (item) {
                    if (key === 'typeId' || key === 'statusId' || key === 'regionId') {
                        this.search.push({
                            andOr: 'and',
                            searchField: key,
                            operator: '=',
                            searchValue: item,
                        })
                    }
                    if (key === 'name') {
                        this.search.push({
                            andOr: 'and',
                            searchField: key,
                            operator: 'like',
                            searchValue: item,
                        })
                    }
                }
            }
        },
        getBatchUsersList() {
            this.loading = true
            this.setSearchData()

            approveApi.List(JSON.stringify(this.search), 'node asc').then((res) => {
                this.approveList = res.data.filter((e) => e.type === '1')
                this.pushList = res.data.filter((e) => e.type === '2')
                this.loading = false
            })
        },
        // 获取区域树
        getTreeData() {
            equipmentApi.getRegionTree().then((res) => {
                this.treeData = res.data
                if (this.treeData.length > 0) {
                    this.defaultExpandedKeys = [this.treeData[0].id]
                    if (this.treeData[0].children.length > 0) {
                        this.currentNodekey = this.treeData[0].children[0].id
                        this.searchObj.regionId = this.treeData[0].children[0].id
                        this.areaName = this.treeData[0].children[0].name
                        this.getBatchUsersList()
                        //把当前选择的key设置到el-tree中
                        this.$nextTick(function () {
                            this.$refs.tree.setCurrentKey(this.currentNodekey)
                        })
                    }
                }
            })
        },
    },
    created() {
        this.getTreeData()
    },
}
</script>

<style lang="scss" scoped>
.workspace {
    .addArea {
        font-size: 14px;
        font-family: Alibaba PuHuiTi 2-55 Regular, Alibaba PuHuiTi 20;
        font-weight: normal;
        color: #00b38b;
        margin-left: 20px;
        cursor: pointer;
        word-break: keep-all;
    }
    .title {
        display: flex;
        align-items: center;

        font-size: 16px;
        font-family: Alibaba PuHuiTi 2-65 Medium, Alibaba PuHuiTi 20;
        font-weight: normal;
        color: #1d2129;
        justify-content: space-between;
        align-items: center;
        .area {
            display: flex;
            column-gap: 8px;
            align-items: center;
        }

        .line {
            display: inline-block;
            width: 3px;
            height: 15px;
            background: #00b38b;
        }
        padding-bottom: 16px;
        border-bottom: 1px solid #eeeeee;
    }
    .left {
        width: 238px;
        background: #fff;
        margin-right: 10px;
        padding: 20px;

        .statusList {
            margin-top: 10px;
            height: calc(100% - 30px);
            overflow: auto;
            .item {
                font-size: 14px;
                height: 42px;
                background: #fff;
                line-height: 42px;
                cursor: pointer;
                padding: 0 10px;
                display: flex;
                justify-content: space-between;
            }
            .activeItem {
                background: #e5f7f3;
                border-radius: 2px 2px 2px 2px;
                color: #00b38b;
            }
        }
    }
    .right {
        // padding: 20px;
        .aproveBox {
            .desc {
                font-size: 12px;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #86909c;
                margin-top: 2px;
                margin-bottom: 25px;
            }
            .users {
                display: flex;
                align-items: center;

                margin-top: 8px;
                .user {
                    min-width: 520px;
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;

                    min-height: 30px;
                    padding: 5px 2px;
                    background: #ffffff;
                    border-radius: 2px 2px 2px 2px;
                    opacity: 1;
                    border: 1px solid rgba(0, 0, 0, 0.15);
                    column-gap: 5px;
                    row-gap: 5px;
                    .user-item {
                        cursor: pointer;
                        height: 24px;
                        padding: 2px 5px;
                        background: #f2f3f5;
                        border-radius: 2px 2px 2px 2px;
                        opacity: 1;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        column-gap: 6px;
                        font-size: 14px;
                        font-family: PingFang SC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #1d2129;
                    }
                }
            }
        }
        .chaosong {
        }
    }
}
</style>
